import React, { useState,useMemo } from 'react';
function Example7() {
    const [xh, sxh] = useState('xh')
    const [zl, szl] = useState('zl')
    return (
        <>
            <button onClick={() => {
                sxh(new Date().getTime())
            }}>小红</button>
            <button onClick={() => {
                szl(new Date().getTime() + 'zl')
            }}>志玲</button>
            {/* 自助机 传递属性和子组件children内容就是只是一个简单的文字，也可以包含标签HTML */}
            <ChilldComponent name={xh}>{zl}</ChilldComponent>
        </>
    )
}
function ChilldComponent({ name, children }) {
//    name是标签ChilldComponent传过来的属性
    function changexh() {
        //   理想状态这个方法只有xh变化才执行。点击zl就不执行这个方法
               console.log('xh来了')
        return name + 'xh来了'
    }
    // usememo监听name是否变化，变化就更新
    const actionxh =useMemo(()=>
        changexh(name),[name]
    )
    return <>
        <div>{actionxh}</div>
        {/* 这个children是一个占位符，ChilldComponent标签里面所有东西会在这个地方占位进行组合 */}
        <div>{children}</div>
    </>
}
export default Example7